<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta http-equiv="Cache-Control" content="no-siteapp"/>
		<meta name="renderer" content="webkit" />
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
        <meta name="description" content="PlaneUI" />
        <meta name="keywords" content="PlaneUI" />
		<title>按钮与按钮组 - PlaneUI 组件示例</title>

        <link rel="icon" type="image/png" href="favicon.png" />
        <link rel="stylesheet" type="text/css" href="./../../dist/css/planeui.css" />
	</head>
	<body>
		<div class="pui-layout" style="width:96%;">
		    <br/>
            <h4 class="h4">按钮与按钮组</h4>
            <p><small>兼容情况： 支持 IE8+</small></p><br/>
			<p>
				<i class="fa fa-camera-retro fa-large" style="color:red;"></i> fa-camera-retro
			</p>
			<p>
				<i class="fa fa-camera-retro fa-2x"></i> fa-camera-retro
			</p>
			<p>
				<i class="fa fa-camera-retro fa-3x"></i> fa-camera-retro
			</p>
			<p>
				<i class="fa fa-camera-retro fa-4x"></i> fa-camera-retro
			</p>
			<p>
				<a href="javascript:;" class="pui-btn pui-btn-success pui-btn-large pui-text-shadow"><i class="fa fa-flag fa-large"></i> 图标按钮 Button</a>
			</p>
			<p>
				<a href="javascript:;" class="pui-btn pui-btn-success pui-text-shadow"><i class="fa fa-flag fa-large"></i> 图标按钮 Button</a>
			</p>
			<p>
				<a href="javascript:;" class="pui-btn pui-btn-success pui-btn-small pui-text-shadow"><i class="fa fa-flag fa-large"></i> 图标按钮 Button</a>
			</p>
			<p>
				<a href="javascript:;" class="pui-btn pui-btn-success pui-btn-xsmall pui-text-shadow"><i class="fa fa-flag fa-large"></i> 图标按钮 Button</a>
			</p>
			<br/>
			<div class="left">
				<div class="pui-btn-toolbar pui-btn-gradient pui-btn-shadow">
					<div class="pui-btn-group">
						<button type="button" class="pui-btn pui-btn-default">
							按钮 1
						</button>
						<button type="button" class="pui-btn pui-btn-default">
							按钮 2
						</button>
						<button type="button" class="pui-btn pui-btn-default">
							按钮 3
						</button>
					</div>
					<div class="pui-btn-group">
						<button type="button" class="pui-btn pui-btn-default">
							按钮 4
						</button>
						<button type="button" class="pui-btn pui-btn-default">
							按钮 5
						</button>
						<button type="button" class="pui-btn pui-btn-default">
							按钮 6
						</button>
					</div>
					<div class="pui-btn-group">
						<button type="button" class="pui-btn pui-btn-default">
							按钮 7
						</button>
						<button type="button" class="pui-btn pui-btn-default">
							按钮 8
						</button>
						<button type="button" class="pui-btn pui-btn-default">
							按钮 9
						</button>
					</div>
					<button type="button" class="pui-btn pui-btn-default">
						按钮 9
					</button>
					<button type="button" class="pui-btn pui-btn-default round">
						按钮 9
					</button>
				</div>
				<br/>
				<div class="pui-btn-group-vertical pui-btn-gradient pui-btn-shadow">
                    <div class="pui-btn-group">
                        <button type="button" class="pui-btn pui-btn-default">
                            按钮 11111111111111111
                        </button>
                        <button type="button" class="pui-btn pui-btn-default">
                            按钮 2222222222222
                        </button>
                        <button type="button" class="pui-btn pui-btn-default">
                            按钮 2222222222222
                        </button>
                        <button type="button" class="pui-btn pui-btn-default">
                            按钮 3333333333
                        </button>
                    </div>
                    <div class="clear"></div>
                    <div class="pui-btn-group">
                        <button type="button" class="pui-btn pui-btn-default pui-btn-small">
                            按钮 11111111111111111
                        </button>
                        <button type="button" class="pui-btn pui-btn-default pui-btn-small">
                            按钮 2222222222222
                        </button>
                        <button type="button" class="pui-btn pui-btn-default pui-btn-small">
                            按钮 2222222222222
                        </button>
                        <button type="button" class="pui-btn pui-btn-default pui-btn-small">
                            按钮 3333333333
                        </button>
                    </div>
                    <div class="clear"></div>
                    <div class="pui-btn-group">
                        <button type="button" class="pui-btn pui-btn-default  pui-btn-xsmall">
                            按钮 11111111111111111
                        </button>
                        <button type="button" class="pui-btn pui-btn-default  pui-btn-xsmall">
                            按钮 2222222222222
                        </button>
                        <button type="button" class="pui-btn pui-btn-default  pui-btn-xsmall">
                            按钮 2222222222222
                        </button>
                        <button type="button" class="pui-btn pui-btn-default  pui-btn-xsmall">
                            按钮 3333333333
                        </button>
                    </div>  		    
				</div> 
                <br/>
                <div class="pui-btn-group pui-btn-group-justify"> 
                    <button type="button" class="pui-btn pui-btn-default pui-btn-large">
                        按钮 11111111111111111
                    </button>
                    <button type="button" class="pui-btn pui-btn-default pui-btn-large">
                        按钮 2222222222222
                    </button>
                    <button type="button" class="pui-btn pui-btn-default pui-btn-large">
                        按钮 3333333333
                    </button>    
                    <button type="button" class="pui-btn pui-btn-default pui-btn-large">
                        按钮 3333333333
                    </button>            
                </div> 
				<br/>
				<div class="pui-btn-group pui-btn-shadow">
					<button class="pui-btn pui-btn-default">
						左
					</button>
					<button class="pui-btn pui-btn-default">
						中fadsfdasfsadf
					</button>
					<button class="pui-btn pui-btn-default">
						中A
					</button>
					<button class="pui-btn pui-btn-default">
						中BBBB
					</button>
					<button class="pui-btn pui-btn-default">
						中CCCC
					</button>
					<button class="pui-btn pui-btn-default">
						右
					</button>
				</div>
				<br/>
				<br/>
				<div class="pui-btn-group pui-btn-gradient pui-btn-shadow">
					<button class="pui-btn pui-btn-primary pui-btn-small">
						首页
					</button>
					<button class="pui-btn pui-btn-success pui-btn-small">
						上一页
					</button>
					<button class="pui-btn pui-btn-info pui-btn-small">
						第1页<span class="arrow-down"></span>
					</button>
					<button class="pui-btn pui-btn-warning pui-btn-small">
						下一页
					</button>
					<button class="pui-btn pui-btn-error pui-btn-small">
						尾页
					</button>
				</div>
				<br/>
				<br/>
				<button type="button" class="pui-btn pui-btn-default pui-btn-large">
					下拉菜单按钮 <span class="arrow-down"></span>
				</button>
				<button type="button" class="pui-btn pui-btn-primary">
					下拉菜单按钮 <span class="arrow-down"></span>
				</button>
                <button type="button" class="pui-btn pui-btn-secondary">
                    下拉菜单按钮 <span class="arrow-down"></span>
                </button>
				<button type="button" class="pui-btn pui-btn-success">
					下拉菜单按钮 <span class="arrow-down"></span>
				</button>
				<button type="button" class="pui-btn pui-btn-info">
					下拉菜单按钮 <span class="arrow-down"></span>
				</button>
				<button type="button" class="pui-btn pui-btn-warning pui-btn-small">
					下拉菜单按钮 <span class="arrow-down"></span>
				</button>
				<button type="button" class="pui-btn pui-btn-error pui-btn-xsmall">
					下拉菜单按钮 <span class="arrow-down"></span>
				</button>
				<button type="button" class="pui-btn pui-btn-link">
					下拉菜单按钮 <span class="arrow-down"></span>
				</button>
				<span class="arrow-down"></span>
				<span class="arrow-up"></span>
				<span class="arrow-left"></span>
				<span class="arrow-right arrow-plus"></span>
				<span class="arrow-right arrow-large"></span>
				<br/>
				<br/>
				<div class="form-group">
					<a class="pui-btn pui-btn-default pui-btn-large" href="#" role="button">a标签链接</a>
					<button class="pui-btn pui-btn-default pui-btn-large">
						默认按钮
					</button>
					<input type="submit" class="pui-btn pui-btn-default pui-btn-large" value="默认按钮" />
                    <input type="button" class="pui-btn pui-btn-primary pui-btn-large" value="主要按钮" />
					<input type="button" class="pui-btn pui-btn-secondary pui-btn-large" value="次要按钮" />
					<input type="button" class="pui-btn pui-btn-info pui-btn-large" value="信息按钮" />
					<input type="button" class="pui-btn pui-btn-success pui-btn-large" value="成功按钮" />
					<input type="button" class="pui-btn pui-btn-warning pui-btn-large" value="警告按钮" />
					<input type="button" class="pui-btn pui-btn-error pui-btn-large" value="错误或失败" />
					<button class="pui-btn pui-btn-link pui-btn-large">
						链接按钮
					</button>
				</div>
				<br/>
				<div class="form-group pui-btn-gradient pui-btn-shadow">
					<a class="pui-btn pui-btn-default" href="#" role="button">a标签链接</a>
					<button class="pui-btn pui-btn-default">
						默认按钮
					</button>
					<input type="submit" class="pui-btn pui-btn-default" value="默认按钮" />
					<input type="button" class="pui-btn pui-btn-primary" value="主要按钮" />
                    <input type="button" class="pui-btn pui-btn-secondary" value="次要按钮" />
					<input type="button" class="pui-btn pui-btn-info" value="信息按钮" />
					<input type="button" class="pui-btn pui-btn-success" value="成功按钮" />
					<input type="button" class="pui-btn pui-btn-warning" value="警告按钮" />
					<input type="button" class="pui-btn pui-btn-error" value="错误或失败" />
					<button class="pui-btn pui-btn-link">
						链接按钮
					</button>
				</div>
				<br/>
				<div class="form-group">
					<a class="pui-btn pui-btn-default hover" href="#" role="button">a标签链接</a>
					<button class="pui-btn pui-btn-default hover">
						默认按钮
					</button>
					<input type="submit" class="pui-btn pui-btn-default hover" value="默认按钮" />
					<input type="button" class="pui-btn pui-btn-primary hover" value="主要按钮" />
                    <input type="button" class="pui-btn pui-btn-secondary hover" value="次要按钮" />
					<input type="button" class="pui-btn pui-btn-info hover" value="信息按钮" />
					<input type="button" class="pui-btn pui-btn-success hover" value="成功按钮" />
					<input type="button" class="pui-btn pui-btn-warning hover" value="警告按钮" />
					<input type="button" class="pui-btn pui-btn-error hover" value="错误或失败" />
					<button class="pui-btn pui-btn-link hover">
						链接按钮
					</button>
				</div>
				<br/>
				<div class="form-group">
					<a class="pui-btn pui-btn-default pui-btn-small" href="#" role="button">a标签链接</a>
					<button class="pui-btn pui-btn-default pui-btn-small">
						默认按钮
					</button>
					<input type="submit" class="pui-btn pui-btn-default pui-btn-small" value="默认按钮" />
					<input type="button" class="pui-btn pui-btn-primary pui-btn-small" value="主要按钮" />
                    <input type="button" class="pui-btn pui-btn-secondary pui-btn-small" value="次要按钮" />
					<input type="button" class="pui-btn pui-btn-info pui-btn-small" value="信息按钮" />
					<input type="button" class="pui-btn pui-btn-success pui-btn-small" value="成功按钮" />
					<input type="button" class="pui-btn pui-btn-warning pui-btn-small" value="警告按钮" />
					<input type="button" class="pui-btn pui-btn-error pui-btn-small" value="错误或失败" />
					<button class="pui-btn pui-btn-link pui-btn-small">
						链接按钮
					</button>
				</div>
				<br/>
				<div class="form-group">
					<a class="pui-btn pui-btn-default pui-btn-small disabled" href="#" role="button">a标签链接</a>
					<button class="pui-btn pui-btn-default pui-btn-small disabled">
						默认按钮
					</button>
					<input type="submit" class="pui-btn pui-btn-default pui-btn-small disabled" value="默认按钮" />
					<input type="button" class="pui-btn pui-btn-primary pui-btn-small disabled" value="主要按钮" />
                    <input type="button" class="pui-btn pui-btn-secondary pui-btn-small disabled" value="次要按钮" />
					<input type="button" class="pui-btn pui-btn-info pui-btn-small disabled" value="信息按钮" />
					<input type="button" class="pui-btn pui-btn-success pui-btn-small disabled" value="成功按钮" />
					<input type="button" class="pui-btn pui-btn-warning pui-btn-small disabled" value="警告按钮" />
					<input type="button" class="pui-btn pui-btn-error pui-btn-small disabled" value="错误或失败" />
					<button class="pui-btn pui-btn-link pui-btn-small disabled">
						链接按钮
					</button>
				</div>
				<br/>
				<div class="form-group">
					<a class="pui-btn pui-btn-default pui-btn-small active" href="#" role="button">a标签链接</a>
					<button class="pui-btn pui-btn-default pui-btn-small active">
						默认按钮
					</button>
					<input type="submit" class="pui-btn pui-btn-default pui-btn-small active" value="默认按钮" />
					<input type="button" class="pui-btn pui-btn-primary pui-btn-small active" value="主要按钮" />
                    <input type="button" class="pui-btn pui-btn-secondary pui-btn-small active" value="次要按钮" />
					<input type="button" class="pui-btn pui-btn-info pui-btn-small active" value="信息按钮" />
					<input type="button" class="pui-btn pui-btn-success pui-btn-small active" value="成功按钮" />
					<input type="button" class="pui-btn pui-btn-warning pui-btn-small active" value="警告按钮" />
					<input type="button" class="pui-btn pui-btn-error pui-btn-small active" value="错误或失败" />
					<button class="pui-btn pui-btn-link pui-btn-small active">
						链接按钮
					</button>
				</div>
				<br/>
				<div class="form-group">
					<a class="pui-btn pui-btn-default pui-btn-xsmall" href="#" role="button">a标签链接</a>
					<button class="pui-btn pui-btn-default pui-btn-xsmall">
						默认按钮
					</button>
					<input type="submit" class="pui-btn pui-btn-default pui-btn-xsmall" value="默认按钮" />
					<input type="button" class="pui-btn pui-btn-primary pui-btn-xsmall" value="主要按钮" />
                    <input type="button" class="pui-btn pui-btn-secondary pui-btn-xsmall" value="次要按钮" />
					<input type="button" class="pui-btn pui-btn-info pui-btn-xsmall" value="信息按钮" />
					<input type="button" class="pui-btn pui-btn-success pui-btn-xsmall" value="成功按钮" />
					<input type="button" class="pui-btn pui-btn-warning pui-btn-xsmall" value="警告按钮" />
					<input type="button" class="pui-btn pui-btn-error pui-btn-xsmall" value="错误或失败" />
					<button class="pui-btn pui-btn-link pui-btn-xsmall">
						链接按钮
					</button>
				</div>
				<br/>
                <input type="submit" class="pui-btn pui-btn-primary pui-btn-block pui-btn-shadow" value="块级按钮" />
                <input type="submit" class="pui-btn pui-btn-secondary pui-btn-block" value="块级按钮" />
                <input type="submit" class="pui-btn pui-btn-info pui-btn-block" value="块级按钮" />
                <input type="submit" class="pui-btn pui-btn-success pui-btn-block" value="块级按钮" />
                <input type="submit" class="pui-btn pui-btn-warning pui-btn-block pui-btn-shadow" value="块级按钮" />
                <input type="submit" class="pui-btn pui-btn-error pui-btn-block" value="块级按钮" />
				<div class="row" style="width:100%;">
					<button class="pui-btn pui-btn-primary pui-btn-large pui-btn-block">
						整块按钮
					</button>
                    <button class="pui-btn pui-btn-secondary pui-btn-large pui-btn-block">
                        整块按钮
                    </button>
					<button class="pui-btn pui-btn-success pui-btn-large pui-btn-block">
						整块按钮
					</button>
					<button class="pui-btn pui-btn-info pui-btn-large pui-btn-block">
						整块按钮
					</button>
					<button class="pui-btn pui-btn-warning pui-btn-block pui-btn-large">
						整块按钮
					</button>
					<button class="pui-btn pui-btn-error pui-btn-block pui-btn-large">
						整块按钮
					</button>
				</div>
				<div class="row" style="width:30%;margin-top:20px;">
					<button class="pui-btn pui-btn-primary pui-btn-block pui-round">
						整块按钮
					</button>
                    <button class="pui-btn pui-btn-secondary pui-btn-block pui-square">
                        整块按钮
                    </button>
					<button class="pui-btn pui-btn-success pui-btn-block">
						整块按钮
					</button>
					<button class="pui-btn pui-btn-info pui-btn-block">
						整块按钮
					</button>
					<button class="pui-btn pui-btn-warning pui-btn-block">
						整块按钮
					</button>
					<button class="pui-btn pui-btn-error pui-btn-block">
						整块按钮
					</button>
				</div>
			</div>
		</div>

        <!--[if (gte IE 9) | !(IE)]><!-->
		<script type="text/javascript" src="./js/jquery-2.1.1.min.js"></script>
        <!--<![endif]-->

		<!--[if lt IE 9]>
		<script type="text/javascript" src="./js/jquery-1.11.3.min.js"></script>
		<script type="text/javascript" src="./../../dist/js/planeui.patch.ie8.js"></script>
		<![endif]-->

		<!--[if lt IE 10]>
		<script type="text/javascript" src="./../../dist/js/planeui.patch.ie9.js"></script>
		<![endif]-->
		<script type="text/javascript" src="./../../dist/js/planeui.js"></script>
	</body>
</html>